import React from 'react'

import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
} from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'
import { Layout, Dropdown, Avatar, Button } from 'antd'

import { useSelector, useDispatch } from 'react-redux'
import { changeCollapsed } from './TopHeaderSlice'

const { Header } = Layout

export default function TopHeader(props) {
  
  const collapsed = useSelector((state) => state.collapsed.value)
  const dispatch = useDispatch()

  const navigator = useNavigate()

  const items = [
    {
      label: '超级管理员',
      key: '0',
    },
    {
      label: '退出',
      key: '1',
      danger: true,
      onClick: () => {
        outLogin()
      },
    },
  ]

  const outLogin = () => {
    //清除localStorge
    localStorage.removeItem('token')
    //调回login
    navigator('/login')
  }
  return (
      <div>
        <Header style={{ padding: '0 16px', background: 'white' }}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() =>dispatch(changeCollapsed())}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
            }}
          />
          <div style={{ float: 'right' }}>
            <span>欢迎admin回来</span>
            <Dropdown menu={{ items }}>
              <Avatar
                size="large"
                icon={<UserOutlined />}
                onClick={(e) => e.preventDefault()}
              />
            </Dropdown>
          </div>
        </Header>
      </div>
  )
}
